<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Media Components - App Inventor for Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c3 {border-width:0}
    code.c2 {font-style: italic}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">My Projects</a><div>(coming soon)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Learn</a> &gt; <a href="../../../learn/reference/index.html">Reference</a> &gt; Media &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Media Components
              </h1>
              <ul>
                <li>
                  <a href="#Camera">Camera</a>
                </li>
                <li>
                  <a href="#ImagePicker">ImagePicker</a>
                </li>
                <li>
                  <a href="#Player">Player</a>
                </li>
                <li>
                  <a href="#Sound">Sound</a>
                </li>
                <li>
                  <a href="#VideoPlayer">VideoPlayer</a>
                </li>
              </ul>
              <h2 id="Camera">
                Camera
              </h2><img alt="" src="images/camera.png">
              <p>
                Use a camera component to take a picture on the phone.
              </p>
              <p>
                Camera is a non-visible component that takes a picture using the device's camera. After the picture is taken, the path to the file on the phone containing the picture is available as an argument to the AfterPicture event. The path can be used, for example, as the Picture property of an Image component.
              </p>
              <h3>
                Properties
              </h3>none
              <h3>
                Methods
              </h3>
              <dl>
                <dt>
                  <code>TakePicture()</code>
                </dt>
                <dd>
                  Opens the phone's camera to allow a picture to be taken.
                </dd>
              </dl>
              <h3>
                Events
              </h3>
              <dl>
                <dt>
                  <code>AfterPicture(Text image)</code>
                </dt>
                <dd>
                  Called after the picture is taken. The text argument <code>image</code> is the path that can be used to locate the image on the phone.
                </dd>
              </dl>
              <h2 id="ImagePicker">
                ImagePicker
              </h2><img alt="" src="images/imagepicker.png">
              <p>
                Use an image picker component to choose an image from your image gallery.
              </p>
              <p>
                An image picker is a kind of button. When the user taps an image picker, the device's image gallery appears, and the user can choose an image. After the user picks an image, the property <code>ImagePath</code> is set to a text string that represents that image. You can then use that result, for example, to set the image of a button.
              </p>
              <h3>
                Properties
              </h3>
              <dl>
                <dt>
                  <code class="c2">ImagePath</code>
                </dt>
                <dd>
                  The image the user chose, represented as a text string that gives the location of the images.
                </dd>
                <dt>
                  <code>Enabled</code>
                </dt>
                <dd>
                  If true, image picker can be used.
                </dd>
                <dt>
                  <code>BackgroundColor</code>
                </dt>
                <dd>
                  Color for image picker background.
                </dd>
                <dt>
                  <code>Enabled</code>
                </dt>
                <dd>
                  If set, user can tap image picker to cause action.
                </dd>
                <dt>
                  <code>FontBold</code>
                </dt>
                <dd>
                  If set, image picker button text is displayed in bold.
                </dd>
                <dt>
                  <code>FontItalic</code>
                </dt>
                <dd>
                  If set, image picker button text is displayed in italics.
                </dd>
                <dt>
                  <code>FontSize</code>
                </dt>
                <dd>
                  Point size for image picker button text.
                </dd>
                <dt>
                  <code>FontTypeface</code>
                </dt>
                <dd>
                  Font family for image picker button text.
                </dd>
                <dt>
                  <code>Height</code>
                </dt>
                <dd>
                  image picker button height (y-size).
                </dd>
                <dt>
                  <code>Width</code>
                </dt>
                <dd>
                  image picker button width (x-size).
                </dd>
                <dt>
                  <code>Image</code>
                </dt>
                <dd>
                  Image to display on image picker button.
                </dd>
                <dt>
                  <code>Text</code>
                </dt>
                <dd>
                  Text to display on image picker button.
                </dd>
                <dt>
                  <code>TextAlignment</code>
                </dt>
                <dd>
                  Left, center, or right.
                </dd>
                <dt>
                  <code>TextColor</code>
                </dt>
                <dd>
                  Color for image picker button text.
                </dd>
              </dl>
              <h3>
                Events
              </h3>
              <dl>
                <dt>
                  <code>AfterPicking()</code>
                </dt>
                <dd>
                  User selected an item from the image picker.
                </dd>
                <dt>
                  <code>BeforePicking()</code>
                </dt>
                <dd>
                  User has tapped the image picker but hasn't yet selected an item.
                </dd>
                <dt>
                  <code>GotFocus()</code>
                </dt>
                <dd>
                  Image picker became the focused component.
                </dd>
                <dt>
                  <code>LostFocus()</code>
                </dt>
                <dd>
                  Image picker is no longer the focused component.
                </dd>
              </dl>
              <h2 id="Player">
                Player
              </h2><img alt="" src="images/player.png">
              <p>
                Use a player component to play an audio or video file, or to vibrate the phone.
              </p>
              <p>
                Player is a non-visible component that plays audio or video and controls phone vibration. The name of a media file is specified in the <code>Source</code> property, which can be set in the Designer or in the Blocks Editor. The length of time for a vibration is specified in the Blocks Editor in milliseconds (thousandths of a second).
              </p>
              <p>
                See <a href="http://developer.android.com/guide/appendix/media-formats.html">Android Supported Media Formats</a> for more information on which types of files you can use.
              </p>
              <p>
                Use a player component for playing long sound files, video files, and vibrating the phone. For playing short sound files, such as sound effects, use a <code>Sound</code> component instead.
              </p>
              <h3>
                Properties
              </h3>
              <dl>
                <dt>
                  <code>Source</code>
                </dt>
                <dd>
                  Audio or video file associated with this player.
                </dd>
              </dl>
              <h3>
                Methods
              </h3>
              <dl>
                <dt>
                  <code>Pause()</code>
                </dt>
                <dd>
                  Pauses playing the audio or video file.
                </dd>
                <dt>
                  <code>Start()</code>
                </dt>
                <dd>
                  Starts playing the audio or video file.
                </dd>
                <dt>
                  <code>Stop()</code>
                </dt>
                <dd>
                  Stops playing the audio or video file.
                </dd>
                <dt>
                  <code>Vibrate(number milliseconds)</code>
                </dt>
                <dd>
                  Activate the phone's vibration motor for the given number of milliseconds.
                </dd>
              </dl>
              <h2 id="Sound">
                Sound
              </h2><img alt="" src="images/sound.png">
              <p>
                Use a sound component to play an audio file, or to vibrate the phone.
              </p>
              <p>
                Sound is a non-visible component that plays sound files and vibrates for the number of milliseconds (thousandths of a second) specified in the Blocks Editor. The name of the sound file to play can be specified either in the Designer or in the Blocks Editor.
              </p>
              <p>
                See <a href="http://developer.android.com/guide/appendix/media-formats.html">Android Supported Media Formats</a> for more information on which types of files you can use.
              </p>
              <p>
                This component is best for short sound files, such as sound effects, while the <code>Player</code> component is more efficient for longer sounds, such as songs.
              </p>
              <h3>
                Properties
              </h3>
              <dl>
                <dt>
                  <code>Source</code>
                </dt>
                <dd>
                  Audio file associated with this sound.
                </dd>
                <dt>
                  <code>MinimumInterval</code>
                </dt>
                <dd>
                  Minimum time before sound is repeated.
                </dd>
              </dl>
              <h3>
                Methods
              </h3>
              <dl>
                <dt>
                  <code>Pause()</code>
                </dt>
                <dd>
                  Pauses playing the audio file.
                </dd>
                <dt>
                  <code>Play()</code>
                </dt>
                <dd>
                  Starts playing the audio file.
                </dd>
                <dt>
                  <code>Resume()</code>
                </dt>
                <dd>
                  Resumes playing a paused audio file.
                </dd>
                <dt>
                  <code>Stop()</code>
                </dt>
                <dd>
                  Stops playing the audio file.
                </dd>
                <dt>
                  <code>Vibrate(number millisecs)</code>
                </dt>
                <dd>
                  Activate the phone's vibration motor for the given number of milliseconds.
                </dd>
              </dl>
              <h2 id="VideoPlayer">
                VideoPlayer
              </h2><img alt="" src="images/videoplayer.png">
              <p>
                Use a VideoPlayer component to play a video file.
              </p>
              <p>
                Video player is a media component that plays videos. A video player appears in your app as a rectangle. If the user taps the rectangle, media controls appear: play/pause, skip ahead, and skip backward. Your app can control playback behavior by calling the <code>Start</code>, <code>Pause</code>, and <code>SeekTo</code> methods.
              </p>
              <p>
                Video files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) format. For more details about formats, see <a href="http://developer.android.com/guide/appendix/media-formats.html">Android Supported Media Formats</a>.
              </p>
              <p>
                App Inventor accepts video files up to 1 MB in size and limits the total size of an app to 5 MB, not all of which is available for media files. If your media files are too large, you might get errors when packaging or installing your app, in which case you should reduce the number of media files or their sizes. Video editing software, such as Windows Movie Maker or Apple iMovie, can help you decrease the size of videos by shortening them or re-encoding them into more compact formats.
              </p>
              <h3>
                Properties
              </h3>
              <dl>
                <dt>
                  <code>Source</code>
                </dt>
                <dd>
                  Video file associated with this player.
                </dd>
                <dt>
                  <code>Visible</code>
                </dt>
                <dd>
                  If set, VideoPlayer is visible.
                </dd>
              </dl>
              <h3>
                Methods
              </h3>
              <dl>
                <dt>
                  <code>Pause()</code>
                </dt>
                <dd>
                  Pauses playing the video file.
                </dd>
                <dt>
                  <code>Start()</code>
                </dt>
                <dd>
                  Starts playing the video file.
                </dd>
                <dt>
                  <code>SeekTo(number millisecs)</code>
                </dt>
                <dd>
                  Seeks to the requested time (specified in milliseconds) in the video.
                </dd>
                <dt>
                  <code>GetDuration()</code>
                </dt>
                <dd>
                  Returns the duration of the video in milliseconds.
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt="Creative Commons License" class="c3" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              The original work by Google has been modified<br>
              <!-- The modified work was translated from English to [language]<br> -->
              <a href="../../../about/index.html">About</a> | <a href="../../../about/privacy.html">Privacy</a> | <a href="../../../about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
